<template>
  <van-popup
    v-model="localIsShowOperationPop"
    round
    position="center"
    @close="buttonOperation"
  >
    <div class="operation_pop">
      <!-- 使用计算属性 -->
      <div
        class="item_btn"
        v-if="showDetailAndDel"
        @click="buttonOperation('detail')"
      >
        查看详情
      </div>
      <div
        class="item_btn"
        v-if="type === 1 && isExplain === 1"
        @click="buttonOperation('apple')"
      >
        申请解读
      </div>
      <div
        class="item_btn"
        v-if="showDetailAndDel"
        @click="buttonOperation('del')"
      >
        {{ type === 1 || type === 2 ? "删除报告" : " 删除记录" }}
      </div>
    </div>
  </van-popup>
</template>

<script>
export default {
  props: {
    isShowOperationPop: {
      type: Boolean,
    },
    type: {
      type: Number, // 1：记录 2：预约 3：线上预约 4：线下预约
      required: true,
    },
    isExplain: {
      type: Number,
    },
  },
  data() {
    return {
      tipsInfo: {},
      localIsShowOperationPop: this.isShowOperationPop,
    };
  },
  computed: {
    showDetailAndDel() {
      return [1, 2, 3, 4].includes(this.type);
    },
  },
  methods: {
    buttonOperation(val) {
      this.$emit("buttonOperation", val);
    },
  },
  watch: {
    isShowOperationPop(newVal) {
      this.localIsShowOperationPop = newVal;
    },
  },
};
</script>

<style lang="less" scoped>
.operation_pop {
  width: 320px;
  background: #ffffff;
  border-radius: 10px;
}
.item_btn {
  width: 100%;
  height: 50px;
  color: #333333;
  line-height: 50px;
  font-size: 14px;
  text-align: center;
  border-bottom: 0.67px solid #dddddd;
}
</style>
